<script setup lang="ts">
defineOptions({
  name: 'OrgTypeSelect',
})
const options = [
  {
    label: '校区',
    value: 'CAMPUS',
    description: '创建校区/教学点',
    icon: 'icon-layers',
  },
  {
    label: '部门',
    value: 'DEPARTMENT',
    description: '对校区和员工进行分组管理',
    icon: 'icon-branch',
  },
]
</script>

<template>
  <a-radio-group class="custom-radio-group">
    <a-radio v-for="item in options" :key="item.value" :value="item.value" class="custom-radio">
      <template #radio="{ checked }">
        <a-space
          align="start"
          class="custom-radio-card"
          :class="{ 'custom-radio-card-checked': checked }"
        >
          <div className="custom-radio-card-mask">
            <div className="custom-radio-card-mask-dot" />
          </div>
          <div>
            <div className="custom-radio-card-title">
              <component :is="item.icon" />
              {{ item.label }}
            </div>
            <a-typography-text type="secondary">
              {{ item.description }}
            </a-typography-text>
          </div>
        </a-space>
      </template>
    </a-radio>
  </a-radio-group>
</template>

<style scoped>
.custom-radio-group {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.custom-radio {
  margin-right: 0px;
}
.custom-radio-card {
  /* margin-left: 20px; */
  padding: 10px 16px;
  border: 1px solid var(--color-border-2);
  border-radius: 4px;
  width: 280px;
  box-sizing: border-box;
}

.custom-radio-card-mask {
  height: 14px;
  width: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  border: 1px solid var(--color-border-2);
  box-sizing: border-box;
}

.custom-radio-card-mask-dot {
  width: 8px;
  height: 8px;
  border-radius: 100%;
}

.custom-radio-card-title {
  color: var(--color-text-1);
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
}

.custom-radio-card:hover,
.custom-radio-card-checked,
.custom-radio-card:hover .custom-radio-card-mask,
.custom-radio-card-checked .custom-radio-card-mask {
  border-color: rgb(var(--primary-6));
}

.custom-radio-card-checked {
  background-color: var(--color-primary-light-1);
}

.custom-radio-card:hover .custom-radio-card-title,
.custom-radio-card-checked .custom-radio-card-title {
  color: rgb(var(--primary-6));
}

.custom-radio-card-checked .custom-radio-card-mask-dot {
  background-color: rgb(var(--primary-6));
}
</style>
